<template>
  <div class="vc-edit-table">
    <div style="margin-bottom: 5px">
      <span>
        <span>新增&nbsp;</span>
        <el-input
          v-model.number="newRow"
          auto-complete="off"
          style="width:50px"
        ></el-input>
        <span>&nbsp;行&nbsp;</span>
      </span>
      <el-button type="success" @click="addNew">确定</el-button>
    </div>
    <!--表格栏-->
    <el-table
      ref="dataTable"
      class="vc-table"
      width="100%"
      v-bind="options"
    >
      <el-table-column
        v-for="(column, index) in columnList"
        :key="index"
        header-align="center"
        align="center"
        :prop="column.fieldName"
        :label="column.showName"
        :width="column.width"
        :min-width="column.minWidth || 0"
      />
      <el-table-column
        label="操作"
        width="80"
        header-align="center"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  compStyle: Object
});

const columnList = ref([]);

watch(() => props.compStyle, compStyle => {
  columnList.value = compStyle['columns'] || [];
}, {immediate: true, deep: true});

const options = computed(() => {
  const compStyle = props.compStyle || {};
  const data = {};
  visual.addIfNotNull(data, compStyle, 'checkAll');
  visual.addIfNotNull(data, compStyle, 'stripe');
  visual.addIfNotNull(data, compStyle, 'border');
  visual.addIfNotNull(data, compStyle, 'tooltip-effect');
  return data;
});
</script>

<style scoped>
.vc-edit-table .vc-table :deep(.el-form-item__content) {
  justify-content: center;
}
</style>